﻿import QtQuick 2.0

Item {
    id: control

    width: 150
    height: 150

    property real currentAngle: 0
    property real warnAngle: 40
    property real maxAngle: 90
    property real angle_:0

    property real radius: control.width > control.height ? control.height/2 - 10 : control.width/2 - 10
    property color backgroundColor: "#212527"
    property string iconSource
    property string iconWarnSource: getImageSouce(iconSource, 2)

    Canvas{
        id: canvas
        antialiasing: true
        anchors.fill: parent
        onPaint: {
            var ctx = getContext("2d")
            ctx.reset();
            ctx.lineWidth = 3
            ctx.strokeStyle = control.backgroundColor
            ctx.fillStyle = control.backgroundColor
            ctx.translate(width/2, height/2)

            ctx.save()
            ctx.beginPath()
            ctx.arc(0,0,control.radius,0,Math.PI*2,true)
            ctx.closePath()
            ctx.fill()
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.lineWidth = 1
            ctx.beginPath()
            ctx.rotate(Math.PI/2)
            for (var i=0; i<= 180; i+=4){
                ctx.strokeStyle = "white"
                ctx.moveTo(0,control.radius)
                ctx.lineTo(0,control.radius-4)
                ctx.rotate(4 / 180 * Math.PI)
            }
            ctx.stroke()
            ctx.restore()

            ctx.save()
            ctx.rotate(Math.PI)
            ctx.lineWidth = 30
            if(currentAngle>=0){
                if(currentAngle < warnAngle){
                    ctx.strokeStyle = Qt.rgba(0, 1, 1, 0.4)
                    ctx.fillStyle = Qt.rgba(0, 1, 1, 0.4)
                }else{
                    ctx.strokeStyle = Qt.rgba(1, 0, 0, 0.4)
                    ctx.fillStyle = Qt.rgba(1, 0, 0, 0.4)
                }
                ctx.beginPath()
                ctx.arc(0, 0, control.radius-15, currentAngle/180*Math.PI, 0,true)
                ctx.stroke()
            }else{
                if(currentAngle > -warnAngle){
                    ctx.strokeStyle = Qt.rgba(0, 1, 1, 0.4)
                    ctx.fillStyle = Qt.rgba(0, 1, 1, 0.4)
                }else{
                    ctx.strokeStyle = Qt.rgba(1, 0, 0, 0.4)
                    ctx.fillStyle = Qt.rgba(1, 0, 0, 0.4)
                }
                ctx.beginPath()
                ctx.arc(0, 0, control.radius-15, Math.PI, (180 + currentAngle)/180*Math.PI,true)
                ctx.stroke()
            }
            ctx.restore()

            ctx.save()
            ctx.fillStyle = "white"
            ctx.font = "36px SimHei bold"
            ctx.textAlign = "center"
            ctx.fillText(String(currentAngle) + "°" , 0, control.radius - 10)
            ctx.restore()

            if(currentAngle < warnAngle){
                ctx.save()
                ctx.rotate((currentAngle-20)/180*Math.PI)
                ctx.drawImage(iconSource, -41, -41)
                ctx.restore()
            }
            else{
                ctx.save()
                ctx.rotate((currentAngle-20)/180*Math.PI)
                ctx.drawImage(iconWarnSource, -41, -41)
                ctx.restore()
            }

        }

        onImageLoaded: requestPaint()
        Component.onCompleted: {
            loadImage(iconSource)
            loadImage(iconWarnSource)
        }
    }
    onAngle_Changed:
    {
        currentAngle = angle_.toFixed(1)
        // console.log("angle:"+currentAngle)
        canvas.requestPaint()
    }
    function getImageSouce(source, index){
        return source.substring(0, source.lastIndexOf('.')) + "_" + String(index) + ".png";
    }

}
